import React, { Component } from 'react';
import {connect} from 'react-redux'
import {getlist,additem} from '../../redux/actions/todo.js'
import {nanoid} from 'nanoid'
class Todo extends Component {
	addItem=()=>{
		const title=this.title.value;
		if(!title){
			return false
		}
		this.props.additem({title,id:nanoid()})
		this.title.value="";
	}
    render() {
    	const {list,num}=this.props;
    	const alert=num>0?null:(
    		<div className="alert alert-danger" role="alert">
				数据已经为负数了！！！！！
			</div>
    	)
        return (
            <div className="container">
				{alert}
				<ul className="list-group">
				  {
				  	list.map((item)=>(
				  		<li key={item.id} className="list-group-item">
							<a href="#" title={item.title}>{item.title}</a>
				  		</li>
				  	))
				  }
				</ul>
				<input ref={(title)=>this.title=title} className="mt-3 form-control" type="text"/>
				<button onClick={this.addItem} className="mt-3 btn btn-primary">添加</button>
            </div>
        );
    }
}

const mapState=(state)=>({list:state.todo,num:state.counter.num})
const mapDispatch={additem}
export default connect(mapState,mapDispatch)(Todo);
